﻿@{
    Layout = null;
    ViewData["Title"] = "Index";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<h1>薪酬发放登记</h1>
<div id="app">
    @*第一部分*@
    <div v-if="hidflag==1">
        <el-form ref="salary_grant" :rules="rule" :model="salary_grant" label-width="120px">
            @*隔断开，设置上间距*@
            <div style="margin: 50px 0;"></div>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="薪酬发放方式" prop="configfilekind">
                        @*<el-cascader v-model="salary_grant.configfile"
                        :options="options"
                        :props="optionProps"
                        v-on:change="handleChange"></el-cascader>*@
                        <el-select v-model="salary_grant.configfilekind" placeholder="请选择薪酬发放方式">
                            <el-option label="一级机构发放方式" value="1"></el-option>
                            <el-option label="二级机构发放方式" value="2"></el-option>
                            <el-option label="三级机构发放方式" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="3" :offset="5">
                    <el-button type="primary" v-on:click="handleFind('salary_grant')">查询</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
    @*第二部分*@
    <div v-if="hidflag==2">
        <el-row :gutter="20">
            <el-col :span="12">
                薪酬总数:{{sgrows}},&nbsp;
                薪酬人数:{{human_amounts}},&nbsp;
                基本薪酬总数:{{salary_standard_sums}},&nbsp;
                实发总额:{{salary_paid_sums}}
            </el-col>
            <el-col :span="2" :offset="10">
                <el-button type="warning" v-on:click="handleFanhuiFK">返回</el-button>
            </el-col>
        </el-row>
        @*隔断开，设置上间距*@
        <div style="margin: 25px 0;"></div>
        <el-table :data="salary_grants"
                  style="width: 100%"
                  :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column prop="sgr_id"
                             label="序号"
                             sortable
                             width="100">
            </el-table-column>
            <el-table-column prop="first_kind_name"
                             label="I级机构名称"
                             sortable
                             width="160">
            </el-table-column>
            <el-table-column prop="second_kind_name"
                             label="II级机构名称"
                             sortable
                             width="160">
            </el-table-column>
            <el-table-column prop="third_kind_name"
                             label="III级机构名称"
                             sortable
                             width="160">
            </el-table-column>
            <el-table-column prop="human_amount"
                             label="人数"
                             sortable
                             width="100">
            </el-table-column>
            <el-table-column prop="salary_standard_sum"
                             label="标准薪酬总金额"
                             sortable
                             width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini"
                               v-on:click="handleEdit(scope.row)">登记</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    @*第三部分*@
    <div v-if="hidflag==3">
        <el-row :gutter="20">
            <el-col :span="12">
                薪酬单编号:{{salary_grant.salary_grant_id}}
            </el-col>
            <el-col :span="5" :offset="7">
                <el-button type="primary" v-on:click="handleSubmit()" style="margin-left: 35px;">提交</el-button>
                <el-button type="warning" v-on:click="handleFanhui" style="margin-left: 15px;">返回</el-button>
            </el-col>
        </el-row>
        <div style="margin: 25px 0;"></div>
        <el-row :gutter="20">
            <el-col :span="12">
                本机构总人数:{{salary_grant.human_amount}},&nbsp;
                基本薪酬总数:{{salary_grant.salary_standard_sum}},&nbsp;
                实发总额:{{salary_grant.salary_paid_sum}}
            </el-col>
            <el-col :span="8" :offset="4">
                登记人:{{salary_grant.register}},&nbsp;
                登记时间:{{salary_grant.regist_time}}
            </el-col>
        </el-row>
        @*隔断开，设置上间距*@
        <div style="margin: 25px 0;"></div>
        <el-table :data="salary_grant_details"
                  style="width: 100%"
                  :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column prop="grd_id"
                             label="序号"
                             sortable
                             width="80">
            </el-table-column>
            <el-table-column prop="human_id"
                             label="档案编号"
                             sortable
                             width="160">
            </el-table-column>
            <el-table-column prop="human_name"
                             label="姓名"
                             sortable
                             width="120">
            </el-table-column>
            <el-table-column label="薪酬基本明细"
                             sortable
                             width="150">
                <template slot-scope="scope">
                    {{scope.row.salary_standard_sum}}&nbsp;&nbsp;
                    <el-button icon="el-icon-search" circle v-on:click="handleDetails(scope.row.human_id)"></el-button>
                </template>
            </el-table-column>
            <el-table-column prop="bouns_sum"
                             label="奖励金额"
                             sortable
                             width="130">
                @*数字文本框*@
                <template slot-scope="scope">
                    <el-input-number class="inputnum1" v-on:change="sumChange(scope.row)" v-model="scope.row.bouns_sum" :precision="2" :step="1" controls-position="right" :max="10000" size="small"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="sale_sum"
                             label="销售绩效总额"
                             sortable
                             width="140">
                @*数字文本框*@
                <template slot-scope="scope">
                    <el-input-number class="inputnum1" v-on:change="sumChange(scope.row)" v-model="scope.row.sale_sum" :precision="2" :step="1" controls-position="right" :max="10000" size="small"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="deduct_sum"
                             label="应扣金额"
                             sortable
                             width="130">
                @*数字文本框*@
                <template slot-scope="scope">
                    <el-input-number class="inputnum1" v-on:change="sumChange(scope.row)" v-model="scope.row.deduct_sum" :precision="2" :step="1" controls-position="right" :max="10000" size="small"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="salary_paid_sum"
                             label="实发金额"
                             sortable
                             width="110">
            </el-table-column>
        </el-table>
        @*薪酬基本明细的模态框*@
        <el-dialog title="薪酬标准明细："
                   :visible.sync="centerDialogVisible"
                   width="35%"
                   center>
            <el-table :data="salary_standard_details"
                      stripe
                      style="width: 100%">
                <el-table-column prop="item_name"
                                 label="薪酬项目名称"
                                 width="170">
                </el-table-column>
                <el-table-column prop="salary"
                                 label="薪酬金额"
                                 width="140">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button style="margin-left:250px" type="primary" v-on:click="centerDialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            //薪酬发放登记表
            salary_grant: {
                //configfile: [],
                //薪酬发放方式
                configfilekind: '',
                //薪酬发放编号
                salary_grant_id: '',
                //薪酬人数
                human_amount: 0,
                //标准薪酬总金额
                salary_standard_sum: '',
                //实发总金额
                salary_paid_sum: '',
                //登记人
                register: '',
                //登记时间
                regist_time: '',
                //复核人
                checker: '',
                //复核时间
                check_time: '',
                //复核状态
                check_status: 0,
            },
            //选中的集合值
            config_file: [],
            //数据源集合
            options: [],
            //次级菜单的展开方式和数据源绑定,如值名，展示名，子集名
            optionProps: {
                expandTrigger: 'hover',
                value: 'id',
                label: 'name',
                children: 'children'
            },
            rule: {
                configfilekind: [
                    { required: true, message: '请选择机构后查询薪酬发放登记信息！', trigger: 'blur' }
                ]
            },
            //隐藏标记
            hidflag: 1,
            //薪酬发放表的数据源集合
            salary_grants: [],
            //该机构下面的总记录条数
            sgrows: 0,
            //该机构下面的总人数
            human_amounts: 0,
            //该机构下面的基本薪酬总数
            salary_standard_sums: 0,
            //实发总额
            salary_paid_sums: 0,
            //薪酬发放详细信息表
            salary_grant_detail: {
                //主键
                grd_id: 0,
                //薪酬发放编号
                salary_grant_id: '',
                //档案编号
                human_id: '',
                //姓名
                human_name: '',
                //奖励金额
                bouns_sum: '',
                //销售绩效金额
                sale_sum: '',
                //应扣金额
                deduct_sum: '',
                //标准薪酬总额
                salary_standard_sum: '',
                //实发薪酬总额
                salary_paid_sum: '',
            },
            //薪酬发放表详细信息的数据源集合
            salary_grant_details: [],
            //模态框的显示标记
            centerDialogVisible: false,
            //薪酬标准明细数据源
            salary_standard_details: [],
        },
        methods: {
            //刷新事件，动态生成三级机构联级选择器
            fillConfigFile() {
                axios.get("/ConfigFile/ConfigFilesFind").then((res) => {
                    console.info("res.Data:", res.data);
                    this.options = res.data;
                });
            },
            //联级选择器选中节点变化事件
            handleChange(value) {
                console.log(value);
            },
            //下拉机构框查询
            configKindFind() {
                //下拉框机构的查询，没有发放过工资的
                axios.get('/SalaryGrant/SalaryGrantFindWay?flagid=' + this.salary_grant.configfilekind).then((res) => {
                    this.hidflag = 2;
                    this.salary_grants = res.data;
                    //先置空，避免复查时累加
                    this.human_amounts = 0;
                    this.salary_standard_sums = 0;
                    this.salary_paid_sums = 0;
                    this.sgrows = this.salary_grants.length;
                    this.salary_grants.forEach((item) => {
                        //遍历人数、标准薪酬总金额、实发金额，进行累加
                        this.human_amounts += item.human_amount;
                        this.salary_standard_sums += item.salary_standard_sum;
                        this.salary_paid_sums += item.salary_paid_sum;
                    });
                    //console.info("this.sgrows:",this.sgrows,this.human_amounts,this.salary_standard_sums,this.salary_paid_sums );
                })
            },
            //查询按钮的点击事件
            handleFind(ruleForm) {
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        this.configKindFind();
                    } else {
                        const h = this.$createElement;
                        this.$notify({
                            title: '温馨提示:',
                            message: h('i', { style: 'color: red' }, '请选择机构后查询薪酬发放登记信息后进行查询！')
                        });
                        console.info("验证失败！");
                    }
                })
            },
            //登记按钮的点击事件
            handleEdit(row) {
                //根据薪酬发放ID查询其发放详情信息
                axios.get("/SalaryGrant/SalaryGrantDetailByIdFalse?salary_grant_id=" + row.salary_grant_id).then(res => {
                    console.info(this.salary_grant, "salary_grant_id:", res.data);
                    if (res.data.length > 0) {
                        //进入到发放登记模块
                        this.hidflag = 3;
                        //将选中行的值回显操作
                        this.salary_grant = row;
                        //根据发放ID查询到的详情数据集
                        this.salary_grant_details = res.data;
                    } else {
                        this.$notify.error({
                            title: '提示：',
                            message: '该机构下所有职工本月已发放过工资，无法继续登记！',
                            showClose: false
                        });
                    }
                })
            },
            //第二部分返回按钮点击事件
            handleFanhuiFK() {
                this.hidflag = 1;
            },
            //第三部分的返回按钮点击事件
            handleFanhui() {
                this.hidflag = 2;
            },
            //数字文本框值改变事件
            sumChange(row) {
                console.info("数字文本框值改变row", row);
                row.salary_paid_sum = row.salary_standard_sum + row.bouns_sum + row.sale_sum - row.deduct_sum;
            },
            //薪酬基本明细按钮
            handleDetails(human_id) {
                axios.get("/SalaryStandard/SalaryStandardDetailsFindHmid?human_id=" + human_id).then(res => {
                    this.centerDialogVisible = !this.centerDialogVisible;
                    this.salary_standard_details = res.data;
                    console.info("res:", res);
                })
            },
            //薪酬发放登记提交修改按钮
            handleSubmit() {
                console.info("hhshs", this.salary_grant_details);
                var sgds = JSON.stringify(this.salary_grant_details);
                console.info("jsonstr:", sgds);
                axios.get("/SalaryGrant/SalaryGrantDetailUpdate?salary_grant_details=" + sgds).then(res => {
                    console.info("res;", res);
                    if (res.data > 0) {
                        this.$message({
                            message: '恭喜，已成功提交更改！',
                            type: 'success'
                        });
                        //返回上一级并进行刷新
                        //this.configKindFind();
                        this.hidflag = 1;
                    }
                });
            },

        },
        mounted: function() {
            //this.fillConfigFile();
        }

    })

</script>
<style lang="less">
    .inputnum1 {
        width: 120px;
    }
</style>